<template>
  <q-list>
    <template v-for="item in menuList" :key="item.id">
      <q-item
        clickable
        v-ripple
        @click="openMenu(item.url)"
        active-class="my-menu-link"
      >
        <q-item-section avatar>
          <q-icon color="primary" :name="item.icon" />
        </q-item-section>
        <q-item-section>{{item.label}}</q-item-section>
      </q-item>
    </template>
  </q-list>
</template>

<script lang="ts">
import { defineComponent, toRefs } from 'vue';
import { useRouter } from 'vue-router';


export default defineComponent({
  name: 'ListItem',
  props: {
    menuList: {
      type: Array,
      required: true
    }
  },
  setup (props, context) {
    //路由
    const router = useRouter();

    //数据解构
    const {
      menuList
    } = toRefs(props);

    //路由跳转
    const openMenu = (url: string) => {
      router.push(url);
    }

    return {
      menuList,
      openMenu
    };
  }
});

</script>

<style lang="scss" scoped >

</style>
